<template>
  <el-table-column
    v-if="item.type == 'selection'"
    type="selection"
    :prop="item.prop"
    :label="item.label"
    :width="item.width"
  />

  <el-table-column
    v-else-if="item.type == 'expand' && item.children"
    type="expand"
    :prop="item.prop"
    :label="item.label"
    :width="item.width"
  />

  <el-table-column
    v-else-if="item.prop"
    :key="item.prop"
    :fixed="item.fixed"
    :prop="item.prop"
    :width="item.width"
    :sortable="item.sortable"
    :scrollbar-always-on="true"
    :label="item.label || item.prop"
    :show-overflow-tooltip="showOverflowTooltip"
    v-bind="item.componentProps"
    :align="(item.componentProps && item.componentProps.align) || 'center'"
  >
    <template slot-scope="scope">
      <template
        v-if="item.type === 'action' && Array.isArray(item.buttonGroup)"
      >
        <div style="display: flex; justify-content: center">
          <div class="table-column-btns">
            <span
              v-for="(action, index) in item.buttonGroup.slice(0, 3)"
              :key="index"
            >
              <template
                v-if="
                  !action.statusName ||
                  (action.statusName.length > 0 &&
                    action.statusName.every((statusName) =>
                      (action.status ? action.status.split(',') : []).includes(
                        scope.row[statusName]
                      )
                    ))
                "
              >
                <el-button
                  :style="index != 0 ? 'margin-left: 10px' : ''"
                  v-bind="action"
                  @click="
                    () => action.click && action.click(scope.row, scope.$index)
                  "
                >
                  {{ action.label }}
                </el-button>
              </template>
            </span>
          </div>
          <template v-if="item.buttonGroup.slice(3).length > 0">
            <el-dropdown style="margin-left: 10px" placement="bottom-start">
              <el-button> 更多</el-button>
              <template slot="dropdown">
                <el-dropdown-menu>
                  <div
                    class="table-column-btns"
                    v-for="(action, index) in item.buttonGroup.slice(3)"
                    :key="index"
                  >
                    <el-dropdown-item>
                      <template
                        v-if="
                          !action.statusName ||
                          (action.statusName.length > 0 &&
                            action.statusName.every((statusName) =>
                              (action.status
                                ? action.status.split(',')
                                : []
                              ).includes(scope.row[statusName])
                            ))
                        "
                      >
                        <div
                          @click="
                            () =>
                              action.click &&
                              action.click(scope.row, scope.$index)
                          "
                        >
                          {{ action.label }}
                        </div>
                      </template>
                    </el-dropdown-item>
                  </div>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </div>
      </template>
      <template v-if="item.type === 'text' && Array.isArray(item.buttonGroup)">
        <div class="table-column-btns">
          <span
            v-for="(action, index) in item.buttonGroup"
            :key="index"
            style="margin-left: 10px"
          >
            <span
              v-if="scope.row && item.prop && scope.row[item.prop]"
              style="cursor: pointer; color: #409eff"
              @click="
                () => action.click && action.click(scope.row, scope.$index)
              "
              >{{ scope.row[item.prop] }}</span
            >
          </span>
        </div>
      </template>

      <template
        v-else-if="
          item.type === 'action' && typeof item.buttonGroup == 'function'
        "
      >
        <div class="table-column-btns">
          <span
            v-for="(action, index) in item.buttonGroup(scope.row)"
            :key="index"
            style="margin-left: 10px"
          >
            <el-button
              v-bind="action"
              @click="
                () => action.click && action.click(scope.row, scope.$index)
              "
            >
              {{ action.label }}
            </el-button>
          </span>
        </div>
      </template>
      <template v-else-if="item.type === 'icon'">
        <Icon
          v-if="scope.row && item.prop && scope.row[item.prop]"
          style="font-size: 20px"
          :name="scope.row[item.prop]"
        />
      </template>
      <template v-else-if="item.type === 'img'">
        <img
          style="width: 100%; height: 100%; object-fit: contain"
          :src="formatter(scope.row, item, scope.row[item.prop])"
        />
      </template>
      <template v-else-if="item.type === 'input'">
        <el-input
          v-no-enter-submit
          v-model="scope.row[item.prop]"
          style="width: 300px"
          @change="
            () =>
              item.inputProps &&
              item.inputProps.onChange &&
              item.inputProps.onChange(scope.row)
          "
        />
      </template>
      
      <template v-else-if="item.type === 'switch'">
        <el-switch
          v-model="scope.row[item.prop]"
          :inline-prompt="
            item.switchProps && item.switchProps.inlinePrompt !== undefined
              ? item.switchProps.inlinePrompt
              : true
          "
          :active-text="
            (item.switchProps && item.switchProps.activeText) || '启用'
          "
          :inactive-text="
            (item.switchProps && item.switchProps.inactiveText) || '禁用'
          "
          v-bind="item.switchProps"
          @change="
            () =>
              item.switchProps &&
              item.switchProps.onChange &&
              item.switchProps.onChange(scope.row)
          "
        />
      </template>
      <template v-else-if="item.type === 'html'">
        <span v-html="scope.row[item.prop]" />
      </template>
      <template
        v-else-if="
          item.type === 'tag' &&
          formatter(scope.row, item, scope.row[item.prop])
        "
      >
        <el-tag :type="colorTag(scope.row[item.prop]) || 'info'">
          {{ formatter(scope.row, item, scope.row[item.prop]) }}
        </el-tag>
      </template>

      <template v-else-if="item.type === 'enum'">
        {{ getEnum(item.enumName, scope.row[item.prop]) }}
      </template>

      <template v-else-if="item.type === 'bool'">
        <el-tag :type="scope.row[item.prop] == '1' ? 'success' : 'danger'">
          {{ scope.row[item.prop] == "1" ? "是" : "否" }}
        </el-tag>
      </template>

      <template v-else-if="item.type === 'link'">
        <span
          style="color: #409eff; cursor: pointer"
          @click="
            () =>
              item.linkProps &&
              item.linkProps.onClick &&
              item.linkProps.onClick(scope.row)
          "
          >{{ scope.row[item.prop] }}</span
        >
      </template>

      <template v-else>
        <span v-if="formatter(scope.row, item, scope.row[item.prop])">
          {{ formatter(scope.row, item, scope.row[item.prop]) }}
          {{ item.unit }}
        </span>
        <span
          v-else-if="
            item.type != 'action' &&
            (formatter(scope.row, item, scope.row[item.prop]) === '' ||
              formatter(scope.row, item, scope.row[item.prop]) === null)
          "
          >--</span
        >
        <span
          v-else-if="
            item.type != 'action' &&
            formatter(scope.row, item, scope.row[item.prop]) == 0
          "
          >0
        </span>
        <el-tag
          v-if="item.type === 'copy'"
          type="primary"
          style="cursor: pointer; margin-left: 10px"
          @click="copyText(formatter(scope.row, item, scope.row[item.prop]))"
        >
          复制
        </el-tag>
        <el-tag
          v-if="item.type === 'query'"
          type="primary"
          style="cursor: pointer; margin-left: 10px"
          @click="
            () =>
              item.queryProps &&
              item.queryProps.onChange &&
              item.queryProps.onChange(scope.row)
          "
        >
          查看
        </el-tag>
      </template>
    </template>
  </el-table-column>
</template>

<script>
import dayjs from "dayjs";
import { colorTag } from "@/utils/colorTag";
// import stores from '@/composables/store';

export default {
  name: "RenderColumn",
  props: {
    item: {
      type: Object,
      required: true,
      default: () => ({}),
    },
  },
  data() {
    return {
      permissionsList: [],
      permissionsData: [],
    };
  },
  computed: {
    showOverflowTooltip() {
      if (this.item.type === "action") {
        return false;
      }
      return this.item.componentProps &&
        this.item.componentProps.showOverflowTooltip !== undefined
        ? this.item.componentProps.showOverflowTooltip
        : true;
    },
  },
  mounted() {
    // 初始化权限相关逻辑
    // const hasTrue = permissions.value.roles.some(
    //   item => item.super === true
    // );
    // const exists = userInfo.some(item => item.super === true);
    // if (exists) {
    //   permissionsSuper.value = true;
    // } else {
    //   permissionsSuper.value = false;
    // }
    // permissionsList.value = permissionsList.value.map(item => item.permis);
  },
  methods: {
    // 复制粘贴
    async copyText(text) {
      try {
        await navigator.clipboard.writeText(text);
        this.$message.success("复制成功");
      } catch (err) {
        this.$message.error("复制失败");
      }
    },
    formatter(row, column, cellValue, index) {
      if (
        this.item.componentProps &&
        this.item.componentProps.formatter &&
        typeof this.item.componentProps.formatter === "function"
      ) {
        return this.item.componentProps.formatter(
          row,
          column,
          cellValue,
          index
        );
      }

      if (this.item.type === "datetime" && column.prop && row[column.prop]) {
        return dayjs(row[column.prop]).format("YYYY-MM-DD HH:mm");
      }
      if (this.item.type === "date" && column.prop && row[column.prop]) {
        return dayjs(row[column.prop]).format("YYYY-MM-DD");
      }
      if (column.prop) {
        return row[column.prop];
      }
    },
    colorTag,
    getEnum(enumName, value) {
      const enums = this.$store.state.enums;
      const enumList = enums[enumName];

      if (!enumList) {
        return value;
      }

      const enumItem = enumList.find((item) => item.value === value);

      return enumItem ? enumItem.text : value;
    },
  },
};
</script>

<style>
/* 全局样式文件 */
.el-tooltip__popper {
  min-width: 100px !important;
  max-width: 300px !important;
  white-space: nowrap !important;
}
</style>

<style scoped lang="scss">
.table-column-btns {
  white-space: nowrap;
}
</style>

<style>
.el-dropdown-menu--small .el-dropdown-menu__item {
  font-size: 14px !important;
}
</style>
